<template>
    <div class="static">
        <!-- 静态组件内容区域 -->
        <div class="titler">
            <img src="../../../assets/头部.png" alt="">
        </div>
        <div class="static_address">

            <div class="static_address_diwei"><img src="@/assets/地图.png" alt=""></div>
            <div class="static_address_ditu">{{a}}</div>
            <div class="static_address_xiaoxi"><img src="@/assets/消息.png" alt=""></div>

        </div>
        <div class="static_search">
            <van-search
                v-model="value"
                shape="round"
                background="#fff"
                placeholder="山姆会员商店优惠商品"
            />
        </div>
        <div class="static_slideshow">
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image1 in images1" :key="image1">
                    <img :src="image1" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="icons">
            <div class="icons__item" v-for="image2 in images2" :key="image2">
              <img class="icons__item__img" :src="image2"/>
              <!-- <p class="icons__item__desc">{{ item.desc }}</p> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { Search } from 'vant';
import { Swipe, SwipeItem } from 'vant';
import  {ref} from 'vue'
let a = ref('北京理工大学国防科技园2号楼10层')
const images2 = [
    'https://m.360buyimg.com/babel/jfs/t1/142996/12/24898/7651/61cbb920E0a96b3c3/ae466bc4d4a35694.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/143138/15/24960/8375/61cbb918E6d1dee2f/2282475ae547d5f2.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/140800/12/24764/8575/61cbb92aE81230d74/989706a49b922ce1.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/223956/27/1730/8496/61cbbafcE9d74496d/398c8ac9f2e2c419.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/216049/36/9285/8515/61cbbaf0Ee1672116/48381a3129578c3e.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/213376/24/9297/8640/61cbbb5eE106e3ad9/c8624eca5f9f5957.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/23861/8/16063/21626/6283969dEcde60315/c68fec2e65a0e76d.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/205866/25/20458/9109/61cbbc17E5dad8090/b931ac02513998ed.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/94192/10/22883/8445/61f3e938Ed9ff2027/238d5269279dd269.png.avif',
    'https://m.360buyimg.com/babel/jfs/t1/177311/10/24971/22133/628afe91Ea528d985/a752ebe3156ec1e2.png.avif',
    ];
const images1 = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
    ];





</script>

<style lang="scss" scoped>

    .titler{
        width: 100%;
        height: 0.2rem;
        background-color: #fff;
    }
    .static{
        display: flex;
        flex-direction: column;
        // height: 3.58rem;
        background-color: #fff;

    }

    .static_address{
        margin-top: 0.16rem;
        display: flex;
        margin-left: 0.18rem;
        width: 3.38rem;
        height: 0.22rem;

        .static_address_diwei{
            width: 0.15rem;
            height: 0.19rem;

            img{
                width: 0.15rem;
                height: 0.19rem;  
            }
        }
        .static_address_ditu{
            margin-left: 0.08rem;
            width: 2.55rem;
            height: 0.22rem;
            font-size: 0.16rem;
        }
        .static_address_xiaoxi{
            margin-left: 0.44rem;
            width: 0.18rem;
            height: 0.19rem;

            img{
                width: 0.18rem;
                height: 0.19rem;  
            }
        }
    }

    .static_search{
        margin-top:0.05rem ;
        margin-left: 0.15rem;
        width: 3.2rem;
        height: 0.32rem;
      
        .van-search{
            padding-left: 0.2rem;
            height: 0.32rem;
            font-size: 0.14rem;
            background-color: #F5F5F5;

        }
    }

    .static_slideshow{
        margin-top: 0.12rem;
        margin-left: 0.18rem;
        width: 3.39rem;
        border-radius: 0.1rem;

        .van-swipe {
            width: 3.39rem;
            height: 1.5rem;

            img{
                width: 3.39rem;
                height: 1.5rem;
            }
        }
    }
    .icons {
        display: flex;
        flex-wrap: wrap;
        height: 1.4rem;
        margin-top: 0.16rem;
        &__item {
            width: 20%;
            height: 0.7rem;
            &__img {
                display: block;
                width: 0.6rem;
                height: 0.7rem;
                margin: 0 auto;
            }
        }
    }
</style>